package com.tencent.compose.sample.mainpage.material3

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview()
@Composable
internal fun DividerDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        // 标题
        Text(
            text = "设置选项",
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.padding(bottom = 8.dp)
        )

        // 标题与内容之间的分隔线
        Divider()

        // 列表项1
        Text(
            text = "账户设置",
            modifier = Modifier.padding(vertical = 16.dp)
        )

        // 列表项之间的分隔线
        Divider(
            thickness = 2.dp,  // 自定义厚度
            color = Color.Gray  // 自定义颜色
        )

        // 列表项2
        Text(
            text = "通知管理",
            modifier = Modifier.padding(vertical = 16.dp)
        )

        // 细分隔线
        Divider(
            thickness = Dp.Hairline  // 极细的分隔线
        )

        // 列表项3
        Text(
            text = "隐私政策",
            modifier = Modifier.padding(vertical = 16.dp)
        )

        // 带边距的分隔线
        Divider(
            modifier = Modifier.padding(horizontal = 32.dp)  // 左右留空
        )

        // 列表项4
        Text(
            text = "关于我们",
            modifier = Modifier.padding(vertical = 16.dp)
        )
    }
}
